<template>
       <div  class="my-container">
        <div v-if="!userState"  class="header not-login">
      <div  class="login-btn" @click="this.$router.push('/login')">
        <img class="mobile-img" src="../../public/login.png" alt="" />
        <span class="text">注册 / 登录</span>
      </div>
    </div>
    <div v-else  class="header user-info">
      <div class="base-info">
        <div  class="left">
          <van-image v-if="userInfo.sex=='男'"
            src="../../public/1.png"
            class="avatar"
            round
            fit="cover"
          ></van-image>
          <van-image v-if="userInfo.sex=='女'"
            src="../../public/2.png"
            class="avatar"
         
            round
            fit="cover"
          ></van-image>
          <span class="name">{{ userInfo.name }}

          </span>
        </div>
        <div class="right">
          <van-button size="mini" to="/editor" round>编辑资料</van-button>
        </div>
      </div>
   
    </div>
    <van-grid :column-num="2" clickable>
      <van-grid-item icon="apps-o" to="/myclub" text="我的社团" />
      <van-grid-item icon="comment-o" to="/mynotification" text="社团通知" />
      <van-grid-item icon="hot-o" to="/myevent" text="社团活动" />
      <van-grid-item icon="guide-o" to="/myvote" text="社团投票" />
    </van-grid>
        <!-- 消息通知与退出登录布局 -->
    <van-cell title="我的资料" to="/myinfo" is-link />
    <van-cell title="我的参与" to="/mypart" is-link />
    <van-cell title="我的申请" to="/myapply"  is-link />
    <van-cell 
      title="退出登录" v-if="userState"
      class="logout-cell" @click="onLogout"
    />
    



    </div>

    </template>
    
    
    
    <script>
    import { useStore } from 'vuex';
    import { computed,onMounted,reactive,toRefs } from 'vue';
    import { Dialog } from 'vant';
    import {getUserInfo} from "../../api/user"
     import store from '../../store/index';
    function useLogout(store){
       const onLogout=()=>{
        Dialog.confirm({
  title: '确认退出吗',
})
  .then(() => {
    // on confirm
    // console.log("确认执行");
    store.commit('setUser',null);
  })
  .catch(() => {
    // on cancel
    console.log("取消执行");
  });
        }
        return{
            onLogout,
        }
    }

    function useLoadUserInfo(){
        const state=reactive({
            userInfo:{
                username:"",
                name:"",
                phone:"",
                email:"",
                avater:""
                //登录后获取用户信息啥的
            }
        });
        const store=useStore();
          const userState=computed(()=>store.state.user); 
          const url=import.meta.env.VITE_APP_URL;
          const loadUserInfo=()=>{
            if(userState.value!==null){
        
                getUserInfo(userState.value.id).then((res)=>{
                    state.userInfo=res.data.data;
                })
            }
          }
        onMounted(() => {
            loadUserInfo();
        });
        return {
            store,
            userState,
            state,
            url,
        }
    }
    export default {
        setup(){
     
        const {store,userState,state,url} =useLoadUserInfo();
          return {
            ...toRefs(state),
            userState,
            ...useLogout(store),
            url
          }
        }

    
    };
    </script>
    
    
    
    
    <style >
    .my-container .header {
      height: 200px;
      background: url("../../public/banner.png");
      background-size: cover;
    }
    .my-container .not-login {
      /* 没有登录的效果样式*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .my-container .not-login .login-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .mobile-img {
      width: 132px;
      height: 132px;
      margin-bottom: 15px;
    }
    .text {
      font-size: 18px;
      font-family:Arial, Helvetica, sans-serif;
      color: #ffffff;
    }
    .user-info .base-info {
      height: 131px;
      padding: 70px 32px 23px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .user-info .left {
      display: flex;
      align-items: center;
    }
    .user-info .left .avatar {
      width: 100px;
      height: 100px;
      margin-right: 13px;
      border: 1px solid #fff;
    }
    .user-info .left .name {
      font-size: 16px;
      color: #fff;
    }
    .user-info .data-stats {
      /* background-color: #ccc; */
      display: flex;
      /* height: 130px; */
    }
    .user-info .data-stats .data-item {
      height: 130px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .user-info .data-stats .count {
      font-size: 18px;
    }
    .user-info .data-stats .text {
      font-size: 18px;
    }
    .van-grid-item__icon {
      color: #eb5253;
    }
    .logout-cell {
      text-align: center;
      color: #d86262;
      height: 120px;
      margin-top: 9px;
    }
    </style>